<template>
	<xbd-pages-content title="待审批">
		<template #content>
			<view class="pendingapproval">
				<uni-load-more
					v-if="loading"
					status="loading"
					:iconSize="12"
					:contentText="{
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '到底了~'
				}"></uni-load-more>
				<xbd-null-list v-else-if="!list.length && !loading"></xbd-null-list>
				<uni-list :border="false" v-else>
					<xbd-list v-for="(item, index) in list" :key="index"  :info="item" @clickList="clickListItem"></xbd-list>
					<xbd-loading-more :status-num="statusNum" :is-load-more="isLoadMore" @more="loadmore"></xbd-loading-more>
				</uni-list>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { Visitor } from '@/api/index.js';
	export default {
		data() {
			return {
				list: [],
				num:0,
				statusNum: 0,
				isLoadMore: false,
				loading: false,
				queryInfo: {
					page: 0,
					perpage: 10,
					type: 'wait',
					date:'',
					keyword:''
				}
			};
		},
		methods: {
			// 加载更多
			loadmore() {
				this.queryInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			clickListItem(id) {
				uni.navigateTo({
					url: `./approvaldetail?id=${id}&title=访客审批&type=2`
				});
			},
			async loadmoreList() {
				try {
					console.log(this.queryInfo);
					this.$showLoading('加载中');
					// this.loading = true;
					const res = await Visitor.getVisitorList(this.queryInfo);
					uni.hideLoading();
					// this.loading = false;
					console.log(res);
					if (res.success) {
						if (res.data.list.length) {
							this.list = this.list.concat(res.data.list);
							if (res.data.list.length === this.queryInfo.perpage) {
								this.statusNum = 2;
							} else {
								this.statusNum = 0;
							}
						} else {
							this.queryInfo.page--;
							this.statusNum = 0;
						}
						
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
					this.queryInfo.page--;
					console.log(e);
				}
			},
			async init() {
				try {
					// this.$showLoading('加载中');
					this.loading = true;
					const res = await Visitor.getVisitorList(this.queryInfo);
					// uni.hideLoading();
					this.loading = false;
					if (res.success) {
						this.list = res.data.list;
						if (res.data.list.length === this.queryInfo.perpage) {
							this.isLoadMore = true;
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
					}
				} catch(e) {
					// uni.hideLoading();
					this.loading = false;
					console.log(e);
				}
			},
			// uni事件中心监听回调
			// filterList() {
			// 	// this.list = this.list.filter(item => item._id !== obj.id);
			// 	this.queryInfo.page = 0
			// 	this.statusNum = 1;
			// 	this.init()
			// 	uni.pageScrollTo({
			// 	    scrollTop: 0,
			// 	});
			// }
		},
		onReachBottom() {
			console.log('到底了')
			// 上拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		},
		onLoad(res) {
			this.init();
			// uni.$on('visitorAudit', this.filterList);
		},
		onShow(){
			this.queryInfo.page = 0
			this.init()
			// 强制刷新回到顶部
			uni.pageScrollTo({
			    scrollTop: 0,
			});
		},
		onUnload() {
			// uni.$off('visitorAudit');
		}
	}
</script>

<style lang="scss" scoped>
		
	::v-deep .uni-list{
		background-color: #F8F8F8;
	}
	.pendingapproval {
		box-sizing: border-box;
		padding: 1px 0;
	}
</style>
